<template>
  <com-page>
    <u-navbar placeholder autoBack :title="$t('pages_app_setting_setting_msg_a79e8b3b')" />
    <view class="com-cell" v-for="item in dataList" :key="item.name" @click="onChange(item)">
      <view class="com-cell__bd">{{ item.name }}</view>
      <u-icon v-if="theme == item.value" name="checkmark-circle-fill" size="18" color="var(--color-primary)" />
    </view>
  </com-page>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'App-Theme',
  data() {
    return {
      dataList: [
        {
          name: this.$t('pages_app_setting_theme_theme_msg_8755e992'),
          value: 'light',
        },
        {
          name: this.$t('pages_app_setting_theme_theme_msg_18d1485c'),
          value: 'dark',
        },
      ],
      theme: uni.getStorageSync('theme'),
    }
  },
  methods: {
    ...mapActions(['changeTheme']),
    onChange(item) {
      this.changeTheme(item.value)
      uni.navigateBack({})
    },
  },
}
</script>

<style lang="scss" scoped></style>
